<template>
  <div id="audio-player">
    <audio id="audioTag" @canplay="getDuration" @timeupdate="updateTime" src="../assets/music/See You Again.mp3"
      ref="audio" loop></audio>
    <div class="a-progress">
      <span class="played-time">{{songtime}}</span>
      <div class="pgs-total">
        <div class="pgs-play" id="progress" :style="{width: widthdata +'%'}"></div>
      </div>
      <span class="audio-time" id="audioTime">{{plaingtime}}</span>

    </div>
    <p>See You Again</p>
    <div id="controls-button">
      <button id="previous1"></button>
      <button id="play1" class="play-pause" v-show="play1" @click="PlayPause"></button>
      <button id="pause1" class="play-pause" v-show="pause1" @click="PlayPause"></button>
      <button id="next1"></button>
      <button id="sound1" @click="soundBar"></button>
      <div id="VolumeBar" v-show="active">
        <div @click.stop="getMousePos($event)">
          <div :style="{height:heightdata+'%'}"></div>
        </div>
      </div>
      <!-- <button id="song-list"></button> -->
    </div>

  </div>
</template>

<script>
  export default {
    name: "AudioPlayer",
    data() {
      return {
        play1: true,
        pause1: false,
        songtime: '',
        plaingtime: '',
        widthdata: 0,
        active: false,
        heightdata: 0,
        // volumedata:0,
        // songurl:'../assets/music/See You Again.mp3',

      };

    },
    methods: {
      PlayPause() {
        const qq = this.$refs.audio;
        if (qq.paused) {
          qq.play();
          this.play1 = false;
          this.pause1 = true;
          // qq.currentTime = 
        } else {
          qq.pause();
          this.play1 = true;
          this.pause1 = false;
        }
      },
      getDuration() {
        
          const time = Math.floor(this.$refs.audio.duration);
          console.log(this.$refs.audio)
          const min = parseInt(time / 60);
          const sec = time % 60;
          this.songtime = min + ":" + sec;
       

      },
      updateTime(e) {
        
          this.currentTime = e.target.currentTime;
          // console.log(this.currentTime);
          const time = Math.floor(this.currentTime);
          const min = parseInt(time / 60);
          const sec = time % 60;
          this.plaingtime = min + ":" + sec;
          this.widthdata = (time / this.$refs.audio.duration * 100);
        
      },
      soundBar() {
        if (this.active == false) {
          this.active = true;
        } else { this.active = false; }


      },
      //控制音量进度条
      getMousePos(e) {
        const y = e.offsetY;
        const Y = parseInt(y / 56 * 100);
        this.heightdata = Y;
        if (1 - Y / 100 < 0) {
          this.$refs.audio.volume = 0;
        } else if (1 - Y / 100 > 1) {
          this.$refs.audio.volume = 1;
        } else {
          this.$refs.audio.volume = 1 - Y / 100;
        };
      },




    },
    watch: {

    }


  };

</script>


<style scoped>
  #audio-player {
    width: 12.5rem;
    height: 7.75rem;
    margin: 0 auto;
    /* border: 1px solid rgba(205, 208, 214,0.5); */
    /* top: 2rem; */
    background: url("../assets/images/friend.jpg");
    background-size: 100% 100%;
    display: inline-block;
  }

  #audio-player>p {
    text-align: center;
    color: #2f8fc7;
  }

  .a-progress {
    margin: 20px auto 10px;
    position: relative;
    padding: 0 3.1875rem;
    color: #2f8fc7;
  }

  .a-progress>span {
    text-align: center;
    width: 1.9375rem;
    position: absolute;
    top: 1px;
    font-size: 0.625rem;
    vertical-align: bottom;

  }

  .a-progress .played-time {
    left: 0.625rem;
  }

  .a-progress .audio-time {
    right: 0.625rem;
  }

  .a-progress .pgs-total {

    height: 16px;

    position: relative;

  }

  .a-progress .pgs-total:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: .4375rem;
    bottom: .4375rem;
    background-color: #aa9f9f;
    border-radius: .625rem;
  }

  .a-progress .pgs-total .pgs-play {
    height: 100%;
    position: relative;
    border-radius: 10px;
  }

  .a-progress .pgs-total .pgs-play:after {
    content: '';
    position: absolute;
    right: -0.375rem;
    width: .75rem;
    height: .75rem;
    top: 50%;
    margin-top: -0.375rem;
    background-color: #3fcccc;
    border-radius: 50%;
    z-index: 1;
  }

  .a-progress .pgs-total .pgs-play:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: .4375rem;
    bottom: .4375rem;
    background-color: #3fcccc;
    border-radius: .625rem;
    z-index: 1;
  }

  #controls-button {
    width: 12.5rem;
    position: relative;
    margin-top: 10px;

  }

  #controls-button>button {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px;
    border-radius: 50%;
    background-size: cover;
    /* margin: auto 0.5rem; */
    vertical-align: middle;
    margin-left: 1.25rem;
  }

  #controls-button>.play-pause {
    width: 2rem;
    height: 2rem;
    background-size: cover;
  }

  #controls-button>button:nth-child(1) {
    background-image: url("../assets/images/next.png");
    transform: rotate(180deg);
  }

  #controls-button>button:nth-child(2) {
    background-image: url("../assets/images/play.png");
    background-position-x: 0.125rem;
  }

  #controls-button>button:nth-child(3) {
    background-image: url("../assets/images/pause.png");
  }

  #controls-button>button:nth-child(4) {
    background-image: url("../assets/images/next.png");
  }

  #controls-button>button:nth-child(5) {
    background-image: url("../assets/images/sound.png");
    width: 1.125rem;
    height: 1.125rem;
  }

  #VolumeBar {
    position: absolute;
    bottom: -16px;
    left: 176px;
    width: .625rem;
    height: 64px;
    background-color: rgba(171, 171, 177, 0.7);
  }

  #VolumeBar>div {
    height: 56px;
    top: 4px;
    bottom: 4px;
    position: relative;
    width: 100%;
  }

  #VolumeBar>div:after {
    content: '';
    width: 2px;
    top: 0px;
    bottom: 0px;
    left: 4px;
    position: absolute;
    background-color: #3fcccc;
    border-radius: 1px;
  }


  #VolumeBar>div>div {
    width: 100%;
    border-radius: 10px;
    position: relative;
    max-height: 100%;
  }

  #VolumeBar>div>div:after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    left: 1px;
    bottom: -4px;
    background-color: #3fcccc;
    border-radius: 50%;
    z-index: 1;
  }

  #VolumeBar>div>div:before {
    content: '';
    width: 2px;
    top: 0px;
    bottom: 0px;
    left: 4px;
    position: absolute;
    background-color: white;
    border-radius: 1px;
    z-index: 1;
  }
</style>